<!---
 添加用户信息
-->
<template>
  <a-form
    name="custom-validation"
    ref="formRef"
    :model="formState"
    :rules="rules"
    v-bind="layout"
    @finish="handleFinish"
    @finishFailed="handleFinishFailed"
  >
    <a-form-item required has-feedback label="用户账号:" name="username">
      <a-input
        v-model:value="formState.username"
        type="text"
        autocomplete="off"
        placeholder="请输入用户账号"
      />
    </a-form-item>
    <a-form-item required has-feedback label="真实姓名:" name="nickname">
      <a-input
        required
        v-model:value="formState.nickname"
        type="text"
        autocomplete="off"
        placeholder="请输入真实姓名"
      />
    </a-form-item>
    <a-form-item required has-feedback label="手机号:" name="phone" >
      <a-input 
      v-model:value="formState.phone"
       type="tel" 
       autocomplete="off" 
       placeholder="请输入手机号" />
    </a-form-item>
    <a-form-item required has-feedback label="联系邮箱:"  name="email">
      <a-input
        v-model:value="formState.email"
        type="email"
        autocomplete="off"
        placeholder="请输入联系邮箱"
      />
    </a-form-item>
    <a-form-item required has-feedback label="所在部门:"  name="department">
      <a-input
        v-model:value="formState.department"
        type="text"
        autocomplete="off"
        placeholder="请选择所在部门"
      />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" html-type="submit">确定</a-button>
      <a-button type="default" style="margin-left: 10px" @click="resetForm">重置</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts">
import {
  RuleObject,
  ValidateErrorEntity,
} from "ant-design-vue/es/form/interface";
import { Button,Input,Form} from "ant-design-vue";
import { defineComponent, reactive, ref, UnwrapRef } from "vue";
interface FormState {
      username:string,
      nickname:string,
      phone:number,
      email:string,
      department:string,
 }
export default defineComponent({
   components: {
      [Button.name]:Button,
      [Input.name]:Input,
      [Form.name]:Form,
      [Form.Item.name]:Form.Item
  },
  setup() {
    const formRef = ref();
    const layout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
    };
    const formState: UnwrapRef<FormState> = reactive({
      username: "",
      nickname: "",
      phone: "",
      email: "",
      department: "",
    });

    const rules = {
      //表单检证
      username: [
        { required: true, message: "账号名不能为空", trigger: "change" },
        {
          min: 3,
          max: 20,
          message: "账号名长度为3至20个字符之间",
          trigger: "change",
        },{
          pattern: /^[A-Za-z]{1}[A-Za-z0-9]/, ///^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{3,20}$/
          message: "账号必须是英文母字开头和数字组成",
        },
      ],
      nickname: [
        { required: true, message: "真实姓名不能为空", trigger: "change" },
        {
          min:2,
          max:20,
          message: "真实姓名名长度为2至20个字符之间",
          trigger: "change",
        },{
          pattern: /^[\u4e00-\u9fa5]+$/, ///^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{3,20}$/
          message: "真实姓名必须为中文汉字",
        }
      ],
      phone: [
        {
          required: true,
          message: "手机号不能为空",
          trigger: "change",
        },
        {
          min: 11,
          max: 11,
          message: "手机号为11个数字组成",
          trigger: "change",
        },
        {
          pattern: /^1[3-9]\d{9}$/,
          message: "手机号格式错误",
        },
      ],
      email: [
        {
          required: true,
          message: "邮箱不能为空",
          trigger: "change",
        },
        {
          pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
          message: "邮箱格式错误",
        },
      ],
      department: [
        { required: true, message: "部门不能为空", trigger: "change" },
      ],
    };

    const handleFinish = (values) => {
      //提交表单且数据验证成功后回调事件
      console.log(values);
      //userAadd(values);
    };
    const handleFinishFailed = (errors: ValidateErrorEntity<FormState>) => {
      //提交表单且数据验证失败后回调事件
      console.log(errors);
    };
    const resetForm = () => {//重置
      formRef.value.resetFields();
    };
    return {
      formState,
      formRef,
      rules,
      layout,
      handleFinishFailed,
      handleFinish,
      resetForm
    };
  },
});
</script>
